<template>
  <div>
    <el-form :inline="true"   class="search-form" size="medium" label-width="100px">
      <el-form-item label="市场名称：">
        <el-select v-model="searchForm.marketId" placeholder="请选择市场" >
          <el-option v-for="(item,index) in store.marketOptions" :key="item.marketId" :label="item.marketName" :value="item.marketId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="签订商户：" prop="shopId">
        <el-select v-model="searchForm.shopId" placeholder="请选择商户">
          <el-option v-for="(item,index) in store.shopOptions" :key="item.shopId" :label="item.shopName" :value="item.shopId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  label="姓名:" >
        <el-input v-model="searchForm.userName" clearable placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item  label="手机号:" >
        <el-input v-model="searchForm.userMobile" clearable placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="用户类型：">
        <el-select v-model="searchForm.userType" placeholder="用户类型">
          <el-option
            v-for="item in userTypeList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户状态：">
        <el-select v-model="searchForm.userState" placeholder="状态">
          <el-option
            v-for="item in userStateList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" icon="el-icon-search" @click="searchData()">查询</el-button>
        <el-button icon="el-icon-refresh" @click="clearSearch">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table  :data="userList" border v-loading="loading">
      <el-table-column prop="userName" label="姓名" ></el-table-column>
      <el-table-column prop="userMobile" label="手机号" ></el-table-column>
      <el-table-column label="用户类型">
        <template   slot-scope="scope">
          <span>{{scope.row.userType | filteUserType}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="market.marketName" label="所属市场"  ></el-table-column>
      <el-table-column label="状态">
        <template   slot-scope="scope">
          <span>{{scope.row.userState | filteUserState}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row.userId)"  size="small"  type="primary">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchForm.pageIndex"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="store.params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: true,
        userList:[],
        pageTotal:0,
        userState: 0,
        userStateList:[
          {
            value: 1,
            name: "正常"
          },
          {
            value: 0,
            name: "冻结"
          }
        ],
        userTypeList:[],
        store:{
          marketOptions:[],
          shopOptions:[],
          params:{
            pageSize:10,
            pageIndex:1,
            marketId: this.$marketId,
            shopId: null,
          },
        },
        searchForm: {
          pageSize:10,
          pageIndex:1,
          marketId: this.$marketId,
          userName:'',
          userMobile:'',
          userType: '',
          userState:'',
          shopId: this.$shopId,
        }
      }
    },
    watch:{
      'searchForm.marketId'(){
        if (this.searchForm.marketId){
          this.store.params.marketId = this.searchForm.marketId;
          this.searchForm.shopId = '';
          this.$store.commit('getShopOptions',this.store)
        }
      }
    },
    created(){
      this.getRoleList();
      this.$store.commit('getMarketOptions',this.store)
    },
    activated() {
       if (this.searchForm.shopId != ''){
          this.getData();
       }else{
           this.loading = false
       }
    },
    methods:{
      getRoleList(){
        const roleId = this.$sess.get('userInfo').roleList[0].roleId;
        if(roleId == 1){
          this.userTypeList = this.$store.state.userRole.allRolesList
        }else if(roleId == 40){
          this.userTypeList = this.$store.state.userRole.shopRolesList
        }
      },
      searchData(){
        if (this.searchForm.shopId != ''){
          this.searchForm.pageIndex = 1;
          this.getData();
        }else{
          this.$message({
                message: '请选择签订商户',
                type: 'error'
            });
           this.loading = false
       }
      },
      getData(){
        this.loading = true;
        this.$axios.get(this.$api.getUserList,{params: this.searchForm})
          .then((res)=>{
            this.userList = res.data.result;
            this.loading = false;
          });
        this.$axios.get(this.$api.getUserNumber,{params: this.searchForm})
          .then((res)=>{
            this.pageTotal = res.data.result
          })
      },
      clearSearch(){
        this.searchForm = {
          pageSize:10,
          pageIndex:1,
          marketId: this.$marketId,
          userName:'',
          userMobile:'',
          userType: '',
          userState:'',
          shopId: this.$shopId
        };
        this.getData();
      },
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.getData();
      },
      handleCurrentChange(val) {
        this.searchForm.pageIndex = val;
        this.getData();
      },
      handleEdit(userId) {
        this.$router.push("/staff/staffForm/"+ userId)
      },

    },

  };
</script>
